<template>
  <div
    class="TheWidget"
    :style="style"
    :data-id="config.id"
    :data-top="config.top"
    :data-left="config.left"
    :data-width="config.wdith"
  ></div>
</template>
<script>
export default {
  name: "TheDemo",
  props: {
    config: {
      type: Object,
      required: true
    },
    dimension: {
      type: Object,
      required: true
    }
  },
  computed: {
    style() {
      return {
        top: this.dimension.top + "px",
        left: this.dimension.left + "px",
        width: this.dimension.width + "px",
        height: this.dimension.height + "px"
      };
    }
  }
};
</script>
